<template>
  <div>
    <p>store中的count: {{ count }}</p>
    <p>store中的计算属性doubleCount: {{ doubleCount }}</p>
    <button @click="addCount">count+1</button>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/store/modules/counterModule.js";

// 导入 storetoRef 方法
// 注意: 如果你直接解构 countStore 中的state 数据, 计算属性这些状态值, 会导致其响应式丢失
// 所以需要借助storetoRef 函数处理一下 countStore,
// 语法: const  {count,doubleCount} storetoRef(countStore)

// 注意: 只有解构时才会出现响应式丢失问题,不解构就不会出现该问题,不需要使用storetoRef 了
import { storeToRefs } from "pinia";

const countStore = useCounterStore();
console.log(countStore);
const { count, doubleCount } = storeToRefs(countStore);
// console.log(count, doubleCount, addCount);
// 方法不需要响应式 , 所以 直接从countStore 中解构即可
const { addCount } = countStore;
</script>
<style scoped >
</style>